<template>
  <footer>
    <p>
      博客已运行 {{ runningTime ? runningTime : '正在加载...' }}
      <span class="ani">(='◡'=)☆</span>
    </p>
    <a
      href="http://beian.miit.gov.cn"
      target="__blank"
      class="beianhao"
    >
      粤ICP备2022071297号-1
    </a>
  </footer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

const runningTime:any = ref(null)

const init = () => {
  setInterval(() => {
    const startDate:any = dayjs('2019-04-15 00:00:00')
    const nowDate:any = dayjs()
    const res = dayjs
      .duration(nowDate - startDate)
      .format('Y年M个月D天H小时m分s秒')
    runningTime.value = res
  }, 1000)
}

init()
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

@keyframes run {
  0% {
    transform: rotate(15deg);
  }
  25% {
    transform: translateY(4px);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: translateY(-4px);
  }
  100% {
    transform: rotate(15deg);
  }
}
footer {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  z-index: 99;
  .beianhao {
    color: $theme-color5;
    text-decoration: none;
  }
  .ani {
    display: inline-block;
    animation: run 2s infinite linear;
  }
}
</style>
